<template>
<div class="pagination">
  <!--
      每页显示  5 个页码
      1.  当 总页数 少于等于 5页, 则 直接输出 1 ~ pages 页码
      2.  当 总页数 大于 5页, 当前页 <= (5+1) / 2 页,  则 直接输出 1 ~ 5 页码
      3.  当 总页数 大于 5页， 当前页 >= (pages - 5/2), 则 直接输出 最后 5 页码
      4.  其它 情况 输出   当前页 前 (10 -1)/2 页 , 后 10/2 页
  -->
  <template v-if="pages <= 1"></template>
  <template v-else-if="pages <= showPageSize">
      <a v-for="p in pages" :class="{active: p === page}"
         :key="p" @click="page = p">{{p}}</a>
      <template v-if="forceEllipses && pages > showPageSize">
        <b>···</b>
        <a>{{pages}}</a>
      </template>
  </template>

  <template v-else-if="page <= toInt((showPageSize +1) / 2)">
    <a v-for="p in showPageSize" :class="{active: p === page}"
          :key="p" @click="page = p">{{p}}</a>
    <template v-if="forceEllipses">
      <b>···</b>
      <a :class="{active: page===pages}" @click="page = pages">{{pages}}</a>
    </template>
  </template>

  <template v-else-if="page >= pages - toInt(showPageSize / 2)">
    <template v-if="forceEllipses">
      <a :class="{active: page===1}" @click="page = 1">1</a>
      <b>···</b>
    </template>
     <a v-for="p in showPageSize"
          :class="{active: pages - showPageSize + p === page}"
          @click="page = pages - showPageSize + p">{{ pages - showPageSize + p }}</a>
  </template>

  <template v-else>
    <template v-if="forceEllipses">
      <a :class="{active: page===1}" @click="page = 1">1</a>
      <b>···</b>
    </template>
     <a v-for="p in showPageSize"
          :class="{active: page - toInt((showPageSize - 1)/2 )  - 1 + p === page}"
          @click="page = page - toInt((showPageSize - 1)/2 )  - 1 + p">{{ page - toInt((showPageSize - 1)/2 )  - 1 + p }}</a>
    <template v-if="forceEllipses">
      <b>···</b>
      <a :class="{active: page===pages}" @click="page = pages">{{pages}}</a>
    </template>
  </template>

  <span>当前第<b>{{page}}</b>页，共<b>{{ pages }}</b>页，<b>{{totalItems}}</b>条数据</span>
</div>
</template>

<script>
export default {
  props: {
     modelValue: {
        type: Number,
        required: false,
        default: 1
     },
     totalItems: { //总条数
       type: Number,
       required: false,
       default: 0,
     },
     itemsPerPage: { // 每页显示条数
       type: Number,
       required: false,
       default: 10,
     },
     showPageSize: { // 显示多少个页码
        type: Number,
        required: false,
        default: 5,
     },
     forceEllipses: { // 是否显示省略号
       type: Boolean,
       required: false,
       default: false,
     }
  },
  emits: ["update:model-value"] ,
  data(){
     return {
        page: this.modelValue ,
     }
  },
  computed: {
     pages() { // 总页数
        return Math.floor((this.totalItems - 1 ) / this.itemsPerPage) + 1 ;
     }
  },
  methods: {
    toInt(num) { // 向下取整
       return Math.floor(num);
    }
  },
  watch: {
     page: function(p) {
        this.$emit("update:model-value", p);
        this.$emit('page-click') ;
     }
  }
}
</script>

<style scoped>

.pagination {
   padding: 0 5px;
   user-select: none;
}

.pagination b {
   line-height: 30px;
}

.pagination a, .pagination span{
   padding: 7px 12px;
   border-radius: 5px;
   color: #000;
   font-size: 12px;
   margin: 0 1px;
}

.pagination a:hover, .pagination a.active {
   background-color: #e8e8e8;
}

.pagination a.disable {
   background: rgba(91, 98, 112, 0.06);
}

.pagination span b {
   margin: 0 2px;
}

</style>

<style>
.ivu-table-footer > div {
  max-width: 1000px !important;
}
</style>